<template>
    <div class="app-container">
      <div class="filter-container">
        <!-- <el-input type="input" v-model="listQuery.bookid" placeholder="作者名称" style="width: 220px;"
        class="filter-item" /> -->
        <el-input type="input" v-model="listQuery.author_id" placeholder="作者id" style="width: 220px;"/>
        <el-input type="input" v-model="listQuery.command" placeholder="作者口令" style="width: 220px;"/>
        <el-input type="input" v-model="listQuery.nick_name" placeholder="作者名称" style="width: 220px;"/>
        <el-select v-model="listQuery.status" placeholder="请选择状态">
            <el-option label="正常" value="1" > </el-option>
            <el-option label="禁用" value="0" > </el-option>
        </el-select>
       
        <a-button type="primary" size="large" @click="handleFilter">
          搜索
        </a-button>
        <a-button type="default" size="large" @click="handleCancel">
          重置
        </a-button>
        <br/>
        <el-button
        plain size="small"
            v-waves
            class="filter-item btn"
            type="success"
            @click="showAdd()"
        >添加作者</el-button>
      </div>
  
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        fit
        highlight-current-row
        style="width: 100%"
      >
      <el-table-column key="1235" type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="头像:" key="11">
                <el-image
                  style="width: 100px; height: 133px"
                  :src="props.row.avatar.img_thumbnail"
                  fit="fit">
                </el-image>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
  
        <el-table-column
          key="1"
          label="作者id"
          align="center"
          prop="author_id"
          min-width="50"
        >
        </el-table-column>
        <el-table-column
          key="2"
          label="名称"
          align="center"
          prop="nick_name"
          min-width="50"
        >
        </el-table-column>
        <el-table-column
          key="3"
          label="口令"
          align="center"
          prop="command"
          min-width="50"
        >
        </el-table-column>
        <el-table-column
          key="5"
          label="图片数量"
          align="center"
          prop="pic_sum"
          min-width="50"
        >
        </el-table-column>

        <el-table-column
          key="6"
          label="状态"
          align="center"
          prop="status"
          min-width="50"
        >
        <template slot-scope="{row}">
            <span>{{ row.status == '1'? '正常': '禁用' }}</span>
        </template>
        </el-table-column>
  
        <el-table-column
          key="4"
          label="操作"
          align="center"
          prop="123"
          min-width="50"
        >
        <template slot-scope="{row}">
            <el-link type="primary" @click="showEdit(row)">编辑</el-link>
        </template>
        
        </el-table-column>
  
      </el-table>
  
      <pagination
        v-show="total > 0"
        :total="total"
        class="pageShow"
        :page.sync="listQuery.page"
        :page_size.sync="listQuery.page_size"
        @pagination="getList"
      />

       <div>
        <el-dialog
            :title="temp.is_edit? '编辑作者':'添加作者'"
            :visible.sync="bookFormShow"
            width="50%"
            :before-close="handleClose"
            class="fullwidth"
            enctype="multipart/form-data"
            >
            <div>
                <el-form :model="temp" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  
                    <el-form-item v-if="!temp.is_edit" label="口令" prop="command">
                        <el-input v-model="temp.command"></el-input>
                    </el-form-item>
  
                    <el-form-item label="昵称" prop="nick_name">
                        <el-input v-model="temp.nick_name"></el-input>
                    </el-form-item>
  
                    <el-form-item label="头像" prop="avatar">
  
                        <el-upload
                            name="img"
                            class="avatar-uploader"
                            id="up"
                            action="http://api_data.ydwhgs.com/api/tupian/upload/img"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  
                        </el-upload>
                    </el-form-item>

                    <el-form-item label="状态">
                        <el-radio-group v-model="temp.status">
                        <el-radio label="1">正常</el-radio>
                        <el-radio label="0">禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
  
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="bookFormShow = false">取 消</el-button>
                <el-button type="primary" @click="temp.is_edit ? editBook1(): addBook1()">提 交</el-button>
            </span>
            </el-dialog>
  
        </div>
    </div>
  </template>
  
  <script>
  import {
    getAuthor,
    addAuthor,
    updateAuthor
  } from "@/api/admin/book";
  import waves from "@/directive/waves"; // waves directive
  import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
  import { MessageBox, Message } from "element-ui";
  export default {
    name: "Report",
    components: { Pagination },
    directives: { waves },
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: "success",
          draft: "info",
          deleted: "danger",
        };
        return statusMap[status];
      },
    },
    data() {
      return {
        userType: this.$store.state.user.type,
        username: this.$store.state.user.name.username,
        tableKey: 0,
        list: null,
        total: 0,
        listLoading: false,
        listQuery: {
          page: 1,
          page_size: 20,
          nick_name: "",
          author_id:'',
          command: '',
          status: ''
        },
        imageUrl: '',
        temp:{
            is_edit:false,
            command: '',
            nick_name: '',
            avatar: '',
            status: '1'
        },
        bookFormShow: false,
        rules: {
            command: [
            { required: true, message: '请输入口令', trigger: 'blur' }
          ],
          nick_name: [
            { required: true, message: '请输入作者昵称', trigger: 'blur' }
          ],
          avatar: [
            { required: true, message: '请上传封面', trigger: 'blur' }
          ]
        },
        classify:[]
      };
    },
    created() {
    },
    mounted() {
        // this.getClassify()
        this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true;
        getAuthor(this.listQuery).then(res => {
          this.listLoading = false;
  
          if (res.code == 200){
            this.list = res.data.author_list
            this.total = res.data.total
          }else{
            Message({
                message: res.message,
                type: "error",
                duration: 2000,
              });
          }
        })
            
      },
      handleFilter() {
        this.listQuery.page = 1;
        this.getList();
      },
      handleCancel() {
        this.listQuery = {
          page: 1,
          page_size: 20,
          nick_name: "",
          author_id:'',
          command: '',
          status: ''
        }
        this.getList();
      },
      detail(row){
        this.$router.push({
            path: '/book/detail',
            query: row
        })
      },
      handleClose(){
        this.bookFormShow = false
      },
      showAdd(){
        this.temp = {
            is_edit:false,
            command: '',
            nick_name: '',
            avatar: '',
            status: '1'
        }
        this.bookFormShow = true
      },
      addBook1(){
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            addAuthor(this.temp).then(res => {
                if (res.code == 200){
                    this.bookFormShow = false
                    Message({
                        message: res.message,
                        type: "success",
                        duration: 2000,
                    })
                }else{
                    Message({
                        message: res.message,
                        type: "error",
                        duration: 2000,
                    })
                }
            })
          } else {
          }
        });
      },
      showEdit(row){
        this.temp={
            is_edit: true,
            author_id: row.author_id,
            nick_name: row.nick_name,
            avatar: row.avatar.img_path,
            status: row.status
        }
        this.imageUrl = row.avatar.img_thumbnail
        this.bookFormShow = true
  
      },
      editBook1(){
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            updateAuthor(this.temp).then(res => {
                if (res.code == 200){
                    this.bookFormShow = false
                    Message({
                        message: res.message,
                        type: "success",
                        duration: 2000,
                    })
                    this.getList()
                }else{
                    Message({
                        message: res.message,
                        type: "error",
                        duration: 2000,
                    })
                }
            })
          } else {
          }
        });
      },
      beforeAvatarUpload(file) {
        },
      handleAvatarSuccess(res, file){
            this.temp.avatar = res.data.img_path
            this.imageUrl = 'http://pic.youdwh.com' + res.data.img_path
            // this.imageUrl = 'http://127.0.0.1:84' + res.data
            // console.log(res,file)
        },
    }
  };
  </script>
  
  <style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 95%;
  }
  .pageHidden {
    display: none;
  }
  @media (max-width: 550px) {
    .pageShow {
      display: none;
    }
    .pageHidden {
      display: block;
    }
    .pickertime {
      width: 100%;
    }
  }
  .filter-item {
    margin-bottom: 3px;
  }
  @media (max-width: 550px) {
  .pageShow {
    display: none;
  }
  .pageHidden {
    display: block;
  }
  .fullwidth {
    width: 100%;
    margin-left: 0;
  }
  }
  
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
  .w-100{
  width: 100px;
  }
  </style>
  